<template>
    <view style="width:100%;height:100%;position: relative;">
        <view class="wbac"></view>
        <view class="w">
            <view class="wmain">
                <view class="machine" :style="'background-image: url(images/machine.png)'">
                    <!-- <form-image style="flex:1;"  :src="'images/machine.png'"></form-image> -->
                </view>
                <div class="registerarea">
                    <h3>{{type==1?'修改密码':'用户名登录'}}</h3>
                    <view style="height:30px"></view>
                    <div class="reg_form">
                        <form action="">
                            <ul>
                                <template v-if="type!=1">
                                    <n-input v-model:value="uinfo.uname" placeholder="请输入用户名" size="large" :style="inputStyle">
                                        <template #prefix>
                                            <icon :icon="['fal','user']"></icon>
                                        </template>
                                    </n-input>
                                    <view style="height:30px"></view>
                                    <n-input v-model:value="uinfo.upwd" type="password" placeholder="搜索" size="large" :style="inputStyle">
                                        <template #prefix>
                                            <icon :icon="['fal','lock-alt']"></icon>
                                        </template>
                                    </n-input>
                                    <view style="height:30px"></view>
                                    <n-button @click="submit" color="#2f9383" :style="btnStyle">登录</n-button>
                                </template>
                                <template v-if="type==1">
                                    <n-input type="password" v-model:value="uinfo.oldpwd" placeholder="请输入旧密码" size="large" :style="inputStyle">
                                        <template #prefix>
                                             <icon :icon="['fal','lock-open-alt']"></icon>
                                        </template>
                                    </n-input>
                                    <view style="height:30px"></view>
                                    <n-input type="password" v-model:value="uinfo.upwd" placeholder="请输入新密码" size="large" :style="inputStyle">
                                        <template #prefix>
                                             <icon :icon="['fal','lock-alt']"></icon>
                                        </template>
                                    </n-input>
                                    <view style="height:30px"></view>
                                    <n-input type="password" v-model:value="uinfo.upwd1" placeholder="重新输入新密码" size="large" :style="inputStyle">
                                        <template #prefix>
                                             <icon :icon="['fal','lock-alt']"></icon>
                                        </template>
                                    </n-input>
                                    <view style="height:30px"></view>
                                    <n-button @click="submit" color="#2f9383" :style="btnStyle">确认修改</n-button>
                                </template>
                            </ul>
                        </form>
                    </div>
                </div>
            </view>
        </view>
    </view>
</template>
<style scoped>
.w .wmain{
    display:flex;
    align-items:center;
    height:100%;
}
.machine{
    height: 100%;
    flex: 2;
    min-width:500px;
    display: flex;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
}
/* 表单模块 */
.registerarea{
    display:flex;
    flex: 0 0 40%;
    min-width: 340px;
    height: 340px;
    flex-direction: column;
    justify-content: center;
    align-items:center;
}

.wbac{
    width:160%;
    height:160%;
    position: absolute;
    top:-30px;
    left:-30px;
    z-index: -1;
}
.w{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 100%;
}

.registerarea h3{
    height: 45px;
    font-size: 20px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #050505;
}

.reg_form{
    width: 300px;
    height: 245px;
}

.reg_form ul li{
    position: relative;
    margin-bottom: 21px;
    list-style: none;
}

.reg_form ul li .img{
    position: absolute;
    top:50%;
    margin-top: -9px;
    left: 18px;
    width: 15px;
    height: 18px;
}
.reg_form ul li .inp,
.reg_form ul li .btn{
    width: 300px;
    height: 45px;
    font-family: Microsoft YaHei;
    font-weight: 400;
}

.reg_form ul li .inp{
    border: 1px solid #444444;
    border-radius: 8px;
    padding-left: 45px;
    font-size: 15px;
    color: #A7A7A7;
    color: initial;
}
.reg_form ul li .btn{
    border: 1px solid #FFF;
    background: #2D9386;
    border-radius: 10px;
    font-size: 10px;
    color: #FFFFFF;
    cursor: pointer;
}

button,
input {
    /* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */
    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    /* 默认有灰色边框我们需要手动去掉 */
    border: 0; 
    outline: none;
}
/* 底部模块 */
.info{
    width: 100%;
    height: 36px;
    background: #F6F6F6;
    border: 1px solid #EEEEEE;
    display: flex;
    justify-content: center;
    align-items:center;
}
</style>
<script>
import FormImage from "@/components/form/FormImage.vue";
import { getCurrentInstance, ref } from 'vue'
export default {
    data(){
        return {
            inputStyle:"border: 1px solid #4444444b;border-radius: 8px;height:45px;",
            btnStyle:"border-radius: 8px;height:45px; width:100%;",
            uinfo: {
                uname: null,
                upwd: null,
                upwd1: null,
                oldpwd: null,
            }
        }
    },

    props:['type'],
    components: { 
        FormImage
    },
    methods: {
        submit() {
            this.$default_hloading.isload = false
            this.$default_hloading.istips = false
            //修改密码
            if(this.type==1) {
                this.uinfo.UHId = this.userInfo.UHID 
                this.$http.get('updatePwd',{params: this.uinfo}).then(res=>{
                    if(res.data.code=="RP_OK") {
                        this.userInfo.STATUS = 3
                        this.$ElMessage.success({message:"密码修改成功",  duration: 1000})
                    }else{
                        this.$ElMessage.error({message:`${res.data.msg}`,  duration: 1000})
                    }
                }).catch((err)=>{
                    console.error(err)
                    this.$ElMessage.error({message:"错误",  duration: 1000})
                })
            }

            //loggin
            if(this.type != 1) {
                this.$http.get('loggin',{params: this.uinfo}).then(res=>{
                    // {"code":"RP_OK","msg":true,"status":null}
                    if(res.data.code=="RP_OK") {                        
                        this.$ElMessage.success({message:"登录成功", duration: 1000})
                        this.userInfo.UHID = res.data.msg.UHId
                        this.userInfo.COMPANYNAME = res.data.msg.comInfo.CName ? res.data.msg.comInfo.CName : "南京十方网络科技有限公司防攻击网关"
                        this.userInfo.SORFTVSERION = res.data.msg.comInfo.CVsesion
                        this.userInfo.KEYTACTICS = res.data.msg.comInfo.KeyTactics
                        this.userInfo.NETCONFIG = res.data.msg.comInfo.NetConfig
                        this.userInfo.NETWORKMODE = res.data.msg.comInfo.NetWorkMode
                        if(res.data.msg.dtype) {
                            this.userInfo.DTYPE = res.data.msg.dtype
                        }
                        
                        if(res.data.msg.userInfo) {
                            this.userInfo.UINFO =  res.data.msg.userInfo
                        }
                        
                        if(res.data.msg.comInfo.NetWorkMode) {
                            setTimeout(() => {
                                this.userInfo.STATUS = 3
                            }, 500);
                        }else {
                            if(res.data.msg.isFirst.code!="RP_OK"){
                                if(res.data.msg.isFirst.msg=="SISKEYERROR") {
                                    //口令输入错误                                    
                                    setTimeout(() => {
                                        this.userInfo.STATUS = 4
                                        this.userInfo.KEYSTATUS = 0
                                        setTimeout(()=>{
                                            this.$ElMessage.error({message:"口令或公司名称输入错误",  duration: 3000})
                                        },500)
                                    }, 800);
                                }else{
                                    this.$ElMessage.error({message:`${res.data.msg.isFirst.msg}`,  duration: 1000})
                                }
                                return;
                            }

                            if(res.data.msg.isFirst.msg==true){
                                setTimeout(() => {
                                    this.userInfo.STATUS = 1
                                }, 500);
                                return;
                            }

                            if(res.data.msg.isFirst.msg==false){
                                setTimeout(() => {
                                    this.userInfo.STATUS = 3
                                }, 500);
                                return;
                            }
                        }
                    }else{
                        this.$ElMessage.error({message:`${res.data.msg}`,  duration: 1000})
                    }
                }).catch(err=>{
                    console.error(err)
                    this.$ElMessage.error({message:"错误",  duration: 1000})
                })
            }
        }
    },
    setup() {
        var {proxy : cthis} = getCurrentInstance()
        return {
            userInfo: ref(cthis.$userInfo)
        }
    }
};

</script>
